<template>
  <el-dialog
    title="编辑用户"
    :visible.sync="dialogVisibleEdit"
    :before-close="closedDialog"
  >
    <el-form
      v-if="userInfoForm"
      :model="userInfoForm"
      ref="ruleForm"
      :rules="rules"
    >
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input
          v-model="userInfoForm.username"
          autocomplete="off"
          disabled=""
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
        <el-input v-model="userInfoForm.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile" :label-width="formLabelWidth">
        <el-input v-model="userInfoForm.mobile" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closedDialog">取 消</el-button>
      <el-button type="primary" @click="submitDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisibleEdit: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    const checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8|9][0-9]{9}$/
      if (!value) {
        // return callback(new Error('电话号码不能为空'))
        return callback()
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
        // 所以我就在前面加了一个+实现隐式转换
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式/长度不正确'))
          }
        }
      }, 100)
    }
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        // return callback(new Error('邮箱不能为空'))
        return callback()
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }
    return {
      formLabelWidth: '120px',
      rules: {
        mobile: [{ validator: checkPhone, trigger: 'blur' }],
        email: [{ validator: checkEmail, trigger: 'blur' }]
      }
    }
  },
  computed: {
    userInfoForm() {
      return this.userInfo
    }
  },
  methods: {
    closedDialog() {
      this.$parent.$data.dialogVisibleEdit = false
      this.$refs.ruleForm.resetFields()
    },
    async submitDialog() {
      const { id, email, mobile } = this.userInfoForm
      console.log(email, mobile)
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const {
            data: { meta }
          } = await this.$http.put('users/' + id, {
            email,
            mobile
          })

          if (meta.status === 200) {
            // 添加成功后，关闭对话框，更新 users 页码表格数据
            this.$message.success(meta.msg)
            this.$parent.$data.dialogVisibleEdit = false
            this.$emit('editUserSuccess')
            this.$refs.ruleForm.resetFields()
          } else {
            this.$message.error(meta.msg)
          }
        } else {
          this.$message.error('填入项未通过验证')
          return false
        }
      })
    },
    testfun() {
      this.closedDialog()
    }
  }
}
</script>

<style></style>
